@charset "UTF-8";
/* CSS Document */
/* top right bottom left */
/*
must be set in px:
text-shadow
absolute position
border width (can also use preset thin/med/thick)
*/

/*ADD RULES FOR MOBILE
*/
@media handheld
{
div.background
{
position: relative;
min-width: 0px; 
min-height:0px;
height: auto;

background-color: rgba(55,55,51,1);
border: none;
padding: 1%;
padding-bottom: 10%;
margin-bottom: 10%;
  -moz-box-shadow: 7px 7px 10px rgba(124,121,114,1);
  -webkit-box-shadow: 7px 7px 10px rgba(124,121,114,1);
  box-shadow: 7px 7px 10px rgba(124,121,114,1);
border-radius: 3%;
}
}


/*font declarations */
@font-face {
	/* This declaration targets Internet Explorer */
	font-family: 'AcornInitialsRegular';
	src: url('/fonts/acorninitials-webfont.eot');
}

@font-face {
	/* This declaration targets everything else */
	font-family: 'AcornInitialsRegular';
	src: url(//:) format('no404'), url('./fonts/acorninitials-webfont.woff') format('woff'), url('./fonts/acorninitials-webfont.ttf') format('truetype'), url('./fonts/acorninitials-webfont.svg#webfontCaMaHVqu') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* set background image to repeat horizontally */
body {text-align: center; font-size:large; background-color:rgba(33,35,32,1); font-family: helvetica; background-image: none; background-repeat: no-repeat; height: 100%; color: rgba(255,238,206,1); position: relative;}

/* main body text and font */
p {margin-right: 15%; margin-left: 15%; margin-top: 2%;}
p.footnote {font-size: 65%;}

/* links */
a{vertical-align:middle; font-weight: bold; 
text-shadow: black 0px 2px 2px; text-decoration: none;}/*shadow uses xy coordinates so cannot be changed to %*/
a:link, a:visited, a:hover, a:active {color: rgba(255,238,206,1);}
a.reg{text-decoration: none; font-size: 80%;}
a.bar{text-decoration: none; font-size: 120%;}
a.reg:link, a.reg:visited, a.bar:link, a.bar:visited {color: rgba(176,224,230,1);}
a.reg:hover, a.bar:hover {color: rgba(115,0,0,1);}
a.reg:active, a.bar:active {color: rgba(255,204,0,1); border: none;}
a.table{text-shadow: none; font-size: inherit;}
a.table:hover {color: rgba(149,160,254,1);}
a.wowhead {font-size: medium; font-weight: normal;}
a.footnote {vertical-align:middle; font-size: 100%;}
a.inline{color: rgba(176,224,230,1); vertical-align: inherit; text-shadow: none;}

/*headings */
h1, h2 {color: rgba(229,236,188,1); margin-top:0; margin-bottom:0; padding: 0; font-weight: bold; border:0; text-shadow: black 0px 2px 2px; font-size: 240%;}
h2:first-letter{font-size: 200%; font-family: "AcornInitialsRegular", "helvetica";}
h3, h4 {margin-top:0; margin-bottom:0; padding: 0; font-size: 150%;}
h5 {font-size: 115%;}

/* divs and spans */
span {margin-right: 15%; margin-left: 15%; margin-top: 0%;}
span.stats {margin: 0;}
div {width: 30%; margin: 0px auto;}
.toggle, .show85 {display: none; width: 100%;}
div.mainPage{width: 100%; overflow:hidden;}
div.footer{width: 100%; position: absolute; bottom: -80px;}
div.loginFooter{width: 100%;}
div.login {background-color: rgba(255,238,206,1); margin-right: 5%; margin-left: 5%; margin:0px auto; width: 65%; border-radius: 15px;border: 4px solid rgba(255,238,206,1); color: rgba(33,35,32,1);}
div.login a, input{vertical-align: inherit; margin-left: 4px; margin-right: 4px; }
div.newLogin {background-color: rgba(255,238,206,1); margin-right: 5%; margin-left: 5%; margin:0px auto; width: 65%; border-radius: 15px;border: 4px solid rgba(255,238,206,1); color: rgba(33,35,32,1); margin-bottom: 0px; margin-top: 0px;}
div.newLogin p, input {margin-top: 4px; margin-bottom: 4px;}
span.diff{margin:inherit; color: white;}
span.d1{margin: inherit; color:rgba(255,128,64,1) !important;}
span.d2{margin: inherit; color:rgba(255,255,0,1) !important;}
span.d3{margin: inherit; color:rgba(64,191,64,1) !important;}
span.d4{margin: inherit; color:rgba(128,128,128,1) !important;}
/*
orange - rgba(255,128,64,1) !important
yellow - rgba(255,255,0,1) !important
green - rgba(64,191,64,1) !important
grey - rgba(128,128,128,1) !important
*/


/*main background with rounded corners */
div.background
{
position: relative;
min-width: 1020px;
width: 95%; 
min-height:1200px;
height: auto;

background-color: rgba(55,55,51,1);
border: none;
padding: 1%;
padding-bottom: 10%;
margin-bottom: 10%;
  -moz-box-shadow: 7px 7px 10px rgba(124,121,114,1);
  -webkit-box-shadow: 7px 7px 10px rgba(124,121,114,1);
  box-shadow: 7px 7px 10px rgba(124,121,114,1);
border-radius: 30px;
/*colours for 212320 background*/
}

/*lists */
ol, ul {margin-right: 15%; margin-left: 15%; margin-top: 2%;}
li {padding: 0.5%; margin-left: 0%; margin-right: 0%; font-size: 90%;}
ul.news {margin: 0;}

/*table properties */
table {font-size:smaller;border-collapse:collapse;margin-left: auto; margin-right: auto; }
table.acclist {font-size: 75%; border-bottom: 3px solid rgba(229,236,188,1);}
/* table.items {} */
table.legend {float: right; overflow:hidden;}

th, td, tr {margin-right: 15%; margin-left: 15%; margin-top: 2%;}
th, td {border-bottom: 2px solid rgba(229,236,188,1);}
th {color: rgba(88,112,115,1); font-weight: bold; padding: 0.5%; text-shadow: black 0px 2px 2px;  }
td {padding-left: 0.5%; padding-right: 0.5%%; padding-top: 0.5%; padding-bottom: 0.5%; margin-right: 15%; margin-left: 15%; margin-top: 2%;}
tr:hover, td:hover{color: rgba(149,160,254,1);}
tr {color: rgba(255,238,206,1);}
tr.highlight {color: rgba(255,204,0,1); font-weight: bold;}
tbody.hide {display:none;}

/* graphs */
/* google chart div */
#chart_div {background-image: none; background-repeat: none; 
right: 15%;
margin-bottom: 2%;
}

/* forms */
select {padding: 0.2%; padding-left: 0%;}
option {background-color: rgba(229,236,188,1); color: rgba(33,35,32,1); font-weight: bold; font-size: 100%; padding: 0.8%;}
input.submit {background-color: rgba(229,236,188,1); color: rgba(33,35,32,1); font-size: 90%; padding: 1px;}

/*clickable non-button for forms in tables*/
.fakebuttonTable {font-weight: bold; color: rgba(255,238,206,1); font-size: 90%;
margin-right: 15%; margin-top: 2%; cursor: pointer; background-color:rgba(33,35,32,1); border: 0px;
}
.fakebuttonTable:hover{color: rgba(149,160,254,1);}


/*img properties - border */
img {border :4px solid rgba(244,0,0,1);}
img.item {border: 3px solid rgba(149,160,254,1); margin: 0% 2% 5% 2%; height: 56px;}
img.item:hover {border :3px solid rgba(244,0,0,1); margin: 0% 2% 5% 2%;}
img.banner {border:0}
img.reagent {height:25px; border: 1px solid rgba(255,238,206,1); vertical-align:middle; margin: 0% 0% 1% 0.5%;}
.char {border-radius: 5px;}
img.crafted {height:25px; border: 1px solid rgba(175,0,0,1); vertical-align:middle; margin: 0% 0% 1% 0.5%;}
.char {border-radius: 5px;}

/*generic classes */
/*Account option - align everything on the right */
.account {color: rgba(255,238,206,1); text-align: right; font-weight: bold; font-size:smaller; margin-right: 15%; margin-left: 15%; margin-top: 2%;}
.add {color: rgba(128,159,254,1); font-weight: bold; margin-right: 15%; margin-left: 15%; margin-top: 2%; font-size:smaller;}
/*indicator colours*/
.warning {color: rgba(244,0,0,1) !important;}/* red */
.warningMid {color: rgba(255,177,0,1) !important;}/* orange */
.warningNone {color: rgba(51,204,0,1) !important;}/*green*/
.warningCap {color: rgba(198,0,255,1) !important;} /*epic purple ?A335EE?*/
td.warning:hover, warningMid:hover, warningNone:hover, warningCap:hover
{color: rgba(149,160,254,1);}

/*quality colours*/
.q0 {color: rgba(157,157,157,1) !important;}/*poor*/
.q1 {color: rgba(255,255,255,1) !important;}/*common*/
.q2 {color: rgba(30,255,0,1) !important;}/*uncommon*/
.q3 {color: rgba(0,112,221,1) !important;}/*rare*/
.q4 {color: rgba(163,53,238,1) !important;}/*epic*/
.q5 {color: rgba(255,128,0,1) !important;}/*legendary*/
.q6 {color: rgba(230,204,128,1) !important;}/*not used*/
.q7 {color: rgba(230,204,128,1) !important;}/*heirloom*/

.qi0 {color: rgba(157,157,157,1) !important; border :3px solid rgba(157,157,157,1); margin: 0% 2% 5% 2%;}/*poor*/
.qi1 {color: rgba(255,255,255,1) !important; border :3px solid rgba(255,255,255,1); margin: 0% 2% 5% 2%;}/*common*/
.qi2 {color: rgba(30,255,0,1) !important; border :3px solid rgba(30,255,0,1); margin: 0% 2% 5% 2%;}/*uncommon*/
.qi3 {color: rgba(0,112,221,1) !important; border :3px solid rgba(0,112,221,1); margin: 0% 2% 5% 2%;}/*rare*/
.qi4 {color: rgba(163,53,238,1) !important; border :3px solid rgba(163,53,238,1); margin: 0% 2% 5% 2%;}/*epic*/
.qi5 {color: rgba(255,128,0,1) !important; border :3px solid rgba(255,128,0,1); margin: 0% 2% 5% 2%;}/*legendary*/
.qi6 {color: rgba(230,204,128,1) !important; border :3px solid rgba(230,204,128,1); margin: 0% 2% 5% 2%;}/*not used*/
.qi7 {color: rgba(230,204,128,1) !important; border :3px solid rgba(230,204,128,1); margin: 0% 2% 5% 2%;}/*heirloom*/
img.q0 {color: rgba(157,157,157,1) !important; border :3px solid rgba(157,157,157,1); margin: 0% 2% 5% 2%;}
img.q1 {color: rgba(255,255,255,1) !important; border :3px solid rgba(255,255,255,1); margin: 0% 2% 5% 2%;}
img.q2 {color: rgba(30,255,0,1) !important; border :3px solid rgba(30,255,0,1); margin: 0% 2% 5% 2%;}
img.q3 {color: rgba(0,112,221,1) !important; border :3px solid rgba(0,112,221,1); margin: 0% 2% 5% 2%;}
img.q4 {color: rgba(163,53,238,1) !important; border :3px solid rgba(163,53,238,1); margin: 0% 2% 5% 2%;}
img.q5 {color: rgba(255,128,0,1) !important; border :3px solid rgba(255,128,0,1); margin: 0% 2% 5% 2%;}
img.q6 {color: rgba(230,204,128,1) !important; border :3px solid rgba(230,204,128,1); margin: 0% 2% 5% 2%;}
img.q7 {color: rgba(230,204,128,1) !important; border :3px solid rgba(230,204,128,1); margin: 0% 2% 5% 2%;}



/* item stuff */
#leftfloat {float:left; overflow:hidden; text-align: right;}
#leftitems {float:left; overflow:hidden; text-align: right;margin-left:auto;margin-right:auto; width: 30%;}
#rightitems {float:right; overflow:hidden; text-align:left;margin-left:auto;margin-right:auto; width: 30%; }

/*popup styling*/
#pup {
  position:absolute;
  z-index:200; /* aaaalways on top*/
  padding: 3px;
  margin-left: 10px;
  margin-top: 5px;
  width: 250px;
  border: 2px solid rgb(229, 236, 188);
  background-color: rgba(119,119,119,1);
  color: rgb(55, 55, 51);
  font-size: 0.95em;
}

/*buttons*/
#menubar
{
width:100%; float:left; overflow:hidden; position:relative;}

#menubarColour
{
clear: left; margin: 0; width: 100%; position:relative; float:left; right: 50%;
background: -linear-gradient(90deg, rgba(112,128,144,1) 10px, rgba(192,192,192,1));
background: -moz-linear-gradient(90deg, rgba(112,128,144,1) 10px, rgba(192,192,192,1));
background: -webkit-linear-gradient(90deg, rgba(112,128,144,1) 10px, rgba(192,192,192,1));
background: -ms-linear-gradient(90deg, rgba(112,128,144,1) 10px, rgba(192,192,192,1));
background: -o-linear-gradient(90deg, rgba(112,128,144,1) 10px, rgba(192,192,192,1));
vertical-align:middle;
z-index:-1;
border: 2px solid rgba(255,238,206,1);
border-radius: 10px / 16px;
padding-top: 4px;
margin-bottom: 5px;
}

#menubar ul
{
clear:left; float:left; position:relative; left:50%; margin:0; padding:0; text-align:center; 
}

#menubar ul li
{
display:block; float:left; position:relative; margin:0; padding:0; right:50%; 
}

#menubar ul li a
{
display: block; margin:0 0 5px 5px;
/* for IE */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(112,128,144,1)', endColorstr='rgba(192,192,192,1)'); 
background: -linear-gradient(90deg, rgba(112,128,144,1) 10px, rgba(192,192,192,1));
background: -moz-linear-gradient(90deg, rgba(112,128,144,1) 10px, rgba(192,192,192,1));
background: -webkit-linear-gradient(90deg, rgba(112,128,144,1) 10px, rgba(192,192,192,1));
background: -ms-linear-gradient(90deg, rgba(112,128,144,1) 10px, rgba(192,192,192,1));
background: -o-linear-gradient(90deg, rgba(112,128,144,1) 10px, rgba(192,192,192,1));
vertical-align: middle;
z-index:-1;
padding: 2px 4px;
  -moz-box-shadow: 3px 3px 5px rgba(124,121,114,1);
  -webkit-box-shadow: 3px 3px 5px rgba(124,121,114,1);
  box-shadow: 3px 3px 5px rgba(124,121,114,1);
}

#menubar ul li a:hover
{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(70,89,111,1)', endColorstr='rgba(116,116,116,1)'); /* for IE */
background: -linear-gradient(90deg, rgba(70,89,111,1) 10px, rgba(116,116,116,1));
background: -moz-linear-gradient(90deg, rgba(70,89,111,1) 10px, rgba(116,116,116,1));
background: -webkit-linear-gradient(90deg, rgba(70,89,111,1) 10px, rgba(116,116,116,1));
background: -ms-linear-gradient(90deg, rgba(70,89,111,1) 10px, rgba(116,116,116,1));
background: -o-linear-gradient(90deg, rgba(70,89,111,1) 10px, rgba(116,116,116,1));
color: rgba(229,236,188,1);
  -moz-box-shadow: 1px 1px 5px rgba(70,89,111,1);
  -webkit-box-shadow: 1px 1px 5px rgba(70,89,111,1);
  box-shadow: 1px 1px 5px rgba(70,89,111,1);
}

#menubar ul li a.left
{
border-radius: 10px 0px 0px 10px;
}

#menubar ul li a.right
{
border-radius: 0px 10px 10px 0px;
}

